<template>
  <div class="quotes" :style="{'min-height':bodyHeight+'px'}">
    <top :text="'行情'"></top>
    <div style="height: 45px;"></div>
    <div class="searchCurrency" @click="$router.push({ path: '/main/searchQuotes' })" v-if="status==0">
      <x-icon type="ios-search" size="25"></x-icon>
    </div>
    <div>
      <ul class="transactionTitle clearfix">
        <li @click="status=0">
          <span :class="{current:status==0}">自选</span>
        </li>
        <li @click="status=1">
          <span :class="{current:status==1}"> 市值</span>
        </li>
        <li @click="status=2">
          <span :class="{current:status==2}" style="width: 70px;">资金流入</span>
        </li>
        <!-- <li @click="status=3" :class="{current:status==3}">板块</li>
        <li @click="status=4" :class="{current:status==4}">其他</li> -->
        <div style="clear:both "></div>
      </ul>
      <ul class="transactionTop clearfix" v-if="status==0">
        <li class="c9" @click="isEdit=!isEdit">
          <span style="margin-left:10px">编辑</span>
          <img src="../../assets/edit.png" alt="" style="vertical-align:middle;">
        </li>
        <li class="c9">最新价
          <!-- <img src="../../assets/zeng.png" alt=""> -->
        </li>
        <li class="c9">
          <span style="margin-right:10px">涨幅价</span>
        </li>
        <div style="clear:both "></div>
      </ul>
      <ul class="transactionTop clearfix" v-if="status==1">
        <li class="c9">
          <span style="margin-left:10px">名称</span>
        </li>
        <li class="c9">流通市值
        </li>
        <li class="c9">
          <span style="margin-right:10px">最新价</span>
        </li>
        <div style="clear:both "></div>
      </ul>
      <!-- 自选 -->
      <ul class="transactionContOneTwo clearfix" v-if="status==0">
        <div class="fr" @click="goQuotesDetail(quotes,0)" v-for="quotes in quotesList">
          <li>
            <div style="margin-left:10px;margin-top: 8px;">
              <img :src="quotes.iconUrl" alt="" width="20" style="vertical-align: middle;">
              <span>{{quotes.currencyPair}}</span>
              <div style="margin-left: 25px;font-size: 12px;">{{quotes.exchange}}</div>
            </div>
          </li>
          <li>
            <div style="margin-top: 15px;">
              <span>¥{{quotes.prices.cny}}</span>
            </div>
          </li>
          <li>
            <div style="margin-right:10px;margin-top: 15px;">
              <span class="zengshu" style="color: #fff">{{quotes.change}}%</span>
              <img src="../../assets/editIcon.png" alt="" width="15" v-if="isEdit" @click.stop="editBtn(quotes)">
            </div>
          </li>
          <div style="clear:both "></div>
        </div>
      </ul>

      <!-- 市值 -->
      <ul class="transactionsecond clearfix" v-if="status==1">
        <div class="fr" @click="goQuotesDetail(market,1)" v-for="market in marketList">
          <li>
            <div class="mgT13" style="margin-left:10px;">
              <img :src="market.iconUrl" alt="" width="20" style="    vertical-align: middle;">
              <span>{{market.currencyPair}}</span>
            </div>
          </li>
          <li style="line-height: 50px;">{{market.marketCap}}</li>
          <li>
            <div style="margin-right:10px">
              <div style="font-size: 15px;margin-top: 3px;" class="c3">¥{{market.prices.cny}}</div>
              <div style="font-size: 11px;">≈{{market.prices.usd}}</div>
            </div>
          </li>
          <div style="clear:both "></div>
        </div>
      </ul>
      <!-- 资金流入 -->
      <ul class="indexSty" v-if="status==2" style="background: #fff;padding: 0px 10px 0px 0px；margin-bottom:70px;" id="capitalBox">
        <div style="height: 50px;background: #fff;display: flex;line-height: 50px;color: #999;font-size: 14px;">
          <div style="flex:1;text-align: center;color:#fea620">近24小时
            <!-- @click="setStauts1" -->
          </div>
          <div style="flex:1;text-align: center;" @click="setStauts2">市值
            <img src="../../assets/hq_icon3_default@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="marketSelect">
            <img src="../../assets/hq_icon2_on@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!marketSelect&&marketStatus">
            <img src="../../assets/hq_icon1_down@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!marketStatus&&!marketSelect">
          </div>
          <div style="flex:1;text-align: center;" @click="setStauts3">净流入
            <img src="../../assets/hq_icon3_default@2x.png" alt="" width="12" style="vertical-align: middle;" @click="" v-if="netInflowSelect">
            <img src="../../assets/hq_icon2_on@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!netInflowSelect&&netInflowStatus">
            <img src="../../assets/hq_icon1_down@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!netInflowSelect&&!netInflowStatus">
          </div>
          <div style="flex:1.2;text-align: center;" @click="setStauts4">净流入占比
            <img src="../../assets/hq_icon3_default@2x.png" alt="" width="12" style="vertical-align: middle;" @click="" v-if="proportionSelect">
            <img src="../../assets/hq_icon2_on@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!proportionSelect&&proportionStatus">
            <img src="../../assets/hq_icon1_down@2x.png" alt="" width="12" style="vertical-align: middle;" v-if="!proportionSelect&&!proportionStatus">
          </div>
        </div>
        <div style="display: flex;border-top: 1px solid #f6f6f6;height: 85px;" v-for="capital in capitalInflowList">
          <div style="flex: 1.5;padding-left:10px;">
            <div style="font-size: 12px;color: #999;margin-top:8px;">{{capital.seq}} {{capital.marketcap}}</div>
            <div>
              <img src="../../assets/autoIcon.png" :src="capital.iconUrl" alt="" width="20" style="vertical-align: middle;">
              <span style="font-size: 13px;">{{capital.tickerSymbol}}</span>
            </div>
            <div>
              <span style="font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis; white-space: nowrap;">价格 {{capital.price}}
                <span style="color: #ff1010;">({{capital.change24h}})</span>
              </span>
            </div>
          </div>
          <div style="flex: 1;text-align: center;">
            <div style="color: #333;font-size: 12px;margin-top:8px;">{{capital.inFlow}}</div>
            <div style="color: #333;font-size: 12px;color: #ff1010;margin:3px 0px;">{{capital.outFlow}}</div>
            <div style="font-size: 12px;" class="justCapital" v-if="capital.netFlow.indexOf('-')>=0">{{capital.netFlow}}</div>
            <div style="font-size: 12px;" class="negativeCapital" v-if="capital.netFlow.indexOf('-')<0">{{capital.netFlow}}</div>
          </div>
          <div style="flex: 1;text-align: center;">
            <div style="color: #333;font-size: 12px;margin-top:8px;">{{capital.inFlowPercent}}</div>
            <div style="color: #333;font-size: 12px;color: #ff1010;margin:3px 0px;">{{capital.outFlowPercent}}</div>
            <div style="font-size: 12px;" class="justCapital" v-if="capital.netPercent.indexOf('-')>=0">{{capital.netPercent}}</div>
            <div style="font-size: 12px;" class="negativeCapital" v-if="capital.netPercent.indexOf('-')<0">{{capital.netPercent}}</div>
          </div>
        </div>
      </ul>
      <!-- 板块 -->
      <!-- <ul v-if="status==3">
        <v-chart ref="demo" :data="data">
          <v-bar />
          <v-tooltip :show-item-marker="false" />
        </v-chart>
        <div style="margin-top: 10px;">
          <div class="exchange">外汇指数</div>
          <ul style="background:#fff">
            <li class="indexCont">
              <div class="c3">
                全球总数值指数
              </div>
              <div class="f10">
                496633
              </div>
              <div class="green">
                <span>-2365</span>
                <span>123</span>
              </div>
            </li>
            <li class="indexCont">
              <div class="c3">
                全球总数值指数
              </div>
              <div class="f10">
                496633
              </div>
              <div class="green">
                <span>-2365</span>
                <span>123</span>
              </div>
            </li>
            <li class="indexCont">
              <div class="c3">
                全球总数值指数
              </div>
              <div class="f10">
                496633
              </div>
              <div class="green">
                <span>-2365</span>
                <span>123</span>
              </div>
            </li>
            <div style="clear: both"></div>
          </ul>
        </div>
      </ul>
      <ul v-if="status==4">
        <div style="text-align: center;margin-top:60px;">
          <img src="../../assets/qita.png" width="80">
          <div>该功能暂未开发</div>
        </div>
      </ul> -->
    </div>
    <tabbar></tabbar>
  </div>
</template>
<script>
  import io from 'socket.io-client'
  import {
    XHeader,
    Confirm,
    Group,
    XSwitch,
    XButton,
    TransferDomDirective as TransferDom
  } from 'vux'
  import {
    VChart,
    VLine,
    VArea,
    VTooltip,
    VLegend,
    VBar
  } from 'vux'
  import tips from '../../service/tips.js'
  import http from '../../service/http.js'
  import Vue from 'vue'
  import axios from 'axios'
  import Tabbar from '../../components/common/Tabbar.vue'
  import Top from '../../components/common/top.vue'
  const socket = io("http://47.52.241.237:9092/marketValue", {
    encoding: true,
    transports: ['websocket', 'xhr-polling', 'jsonp-polling']
  }) //市值
  const selection = io('http://47.52.241.237:9092/choose', {
    encoding: true,
    transports: ['websocket', 'xhr-polling', 'jsonp-polling']
  }) //自选
  export default {
    data() {
      return {
        status: 0,
        isEdit: false,
        quotesList: [], //自选
        marketList: [], //市值
        bodyHeight: "",
        marketStatus: true, //控制市值(上下箭头)
        marketSelect: false, //控制市值

        netInflowStatus: false, //控制净入流(上下箭头)
        netInflowSelect: true, //控制净入流

        proportionStatus: false, //控制净入流占比(上下箭头)
        proportionSelect: true, //控制净入流占比

        currentPage: "1", //当前页
        pageSize: 10, //每页总条数
        capitalInflowList: [], //渲染的数据
        capitalType: "marketcap", //默认市值 // marketcap:市值// netPercent:净流入百分比// netFlow:净流入
        sortType: "asc", //排序方式asc/desc(升序/降序)
      }
    },
    mounted() {
      // 获取当前屏幕的高度
      this.bodyHeight = document.documentElement.clientHeight - 56;

      socket.on("marketValue", (data) => {
        this.marketList = data;
      });
      if (this.status == 0) {
        this.getData();
      }
      var that = this;
    },
    watch: {
      status(value1, value2) {
        if (value1 == 2) {
          this.getCapitalInflow();
          var that = this;
          window.addEventListener("scroll", that.handleFun)
          // window.onscroll = function () {
            // 之前在这里进行调用 但该方法注册在window上 其他页面滚动的时候仍可加载
          // }
        }
      }
    },
    methods: {
      setStauts2() { //市值
        this.marketSelect = false; //选中
        this.marketStatus = !this.marketStatus;

        this.netInflowSelect = true;
        this.netInflowStatus = false;

        this.proportionSelect = true;
        this.proportionStatus = false;

        this.capitalType = "marketcap";
        this.sortType = this.marketStatus ? 'asc' : 'desc';
        this.getCapitalInflow();
      },
      setStauts3() { //净流入
        this.netInflowSelect = false; //选中
        this.netInflowStatus = !this.netInflowStatus;

        this.marketSelect = true;
        this.marketStatus = false;

        this.proportionSelect = true;
        this.proportionStatus = false;

        this.capitalType = "netFlow"
        this.sortType = this.netInflowStatus ? 'asc' : 'desc';
        this.getCapitalInflow();
      },
      setStauts4() { //净流入占比
        this.marketSelect = true;
        this.marketStatus = false;

        this.netInflowSelect = true;
        this.netInflowStatus = false;

        this.proportionSelect = false; //选中
        this.proportionStatus = !this.proportionStatus;

        this.capitalType = "netPercent";
        this.sortType = this.proportionStatus ? 'asc' : 'desc';
        this.getCapitalInflow();
      },
      handleFun() {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        var windheight = document.body.offsetHeight;
        var h = document.documentElement.clientHeight || document.body.clientHeight;
        if (scrollTop >= (windheight - h)) {
          if (this.status != 2) {
            return false
          }
          this.pageSize += 10;
          this.getCapitalInflow();
        }
      },
      getCapitalInflow() {
        if (this.status != 2) {
          return false;
        }
        axios.get('http://47.52.241.237:8088/marketData/capitalFlows?offset=0&limit=' + this.pageSize + '&sort=' + this
          .capitalType + ',' + this.sortType).then(res => {
            if (res.status == 200) {
              this.capitalInflowList = res.data.data;
            }
          })
      },
      goQuotesDetail(type, status) {
        this.$router.push({
          path: "/main/quotesDetail?currencyPair=" + type.currencyPair + "&exchangeName=" + type.exchange +
            "&status=" + status
        })
      },
      getData() {
        http.get("/market/chooses").then((res) => {
          if (res.status == 200) {
            if (this.status == 0) {
              selection.emit('init', JSON.stringify(res.data.body));
              selection.on("choose", (data) => {
                this.quotesList = data;
              })
            }
          }
        })
      },
      // 删除
      editBtn(item) {
        http.delete("/market/choose?exchangeName=" + item.exchange + "&currencyPair=" + item.currencyPair).then((res) => {
          if (res.status == 200) {
            tips.tips("删除成功");
            this.getData();
          } else {
            tips.tips(res.data.msg)
          }
        }).catch((res) => {
          tips.tips(res.data.msg)
        })
      }
    },

    // 销毁window上的scroll 防止在其他页面进行滚动加载
    destroyed() {
      window.removeEventListener("scroll", this.handleFun)
    },

    components: {
      XHeader,
      Confirm,
      Group,
      XSwitch,
      XButton,
      VChart,
      VLine,
      VArea,
      VTooltip,
      VLegend,
      VBar,
      Tabbar,
      Top
    }
  }
</script>
<style lang="less" scoped>
  .quotes .vux-header {
    background: #fff;
  }

  .quotes {
    background: #f6f6f6;
  }

  .quotes .bt {
    border-bottom: 1px solid #f6f6f6;
  }

  .quotes .current {
    color: #fea620 !important;
    border-bottom: 1px solid #fea620;
  }

  body {
    background: #f6f6f6;
  }

  .quotes .c6 {
    color: #666;
  }

  .quotes .c9 {
    color: #999;
  }

  .quotes .fr {
    position: relative;
  }

  .quotes .fa {
    position: absolute;
  }

  .quotes .r10 {
    right: 10px;
    ;
  }

  .quotes .c9 {
    color: #999;
  }

  .quotes .searchCurrency {
    position: fixed;
    right: 15px;
    top: 13px;
    z-index: 9999999;
  }

  .quotes .transactionMoeny {
    position: absolute;
    right: 10px;
  }

  .quotes .mgT13 {
    margin-top: 13px;
  }

  .quotes .vux-header .vux-header-left .left-arrow:before {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    border: 1px solid #000;
    border-width: 1px 0 0 1px;
    -webkit-transform: rotate(315deg);
    transform: rotate(315deg);
    top: 8px;
    left: 7px;
  }

  .quotes .vux-header .vux-header-title {
    line-height: 40px;
    text-align: center;
    font-size: 18px;
    font-weight: 400;
    color: #000;
  }

  .quotes .transactionTitle {
    text-align: center;
    background: #f6f6f6;
  }

  .quotes .transactionTitle li {
    float: left;
    list-style: none;
    color: #999;
    font-size: 16px;
    height: 35px;
    line-height: 35px;
    width: 33.33%;
    span {
      height: 35px;
      width: 45px;
      display: inherit;
      text-align: center;
      margin: auto;
    }
  }

  .quotes .transactionContOneTwo {
    background: #fff;
    text-align: center;
    margin-bottom: 55px;
  }

  .quotes .transactionContOneTwo li {
    color: #333;
    float: left;
    height: 60px;
    /* line-height: 60px; */
    border-bottom: 1px solid #f6f6f6;
    list-style: none;
    width: 33.33%;
  }

  .quotes .transactionContOneTwo li:first-child {
    text-align: left;
  }

  .quotes .transactionContOneTwo li:nth-child(3n) {
    text-align: right;
  }

  .quotes .positive {
    color: #81d425 !important;
  }

  .quotes .zengshu {
    color: #fff;
    width: 65px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #ff1010;
    display: inline-block;
    border-radius: 5px;
  }

  .quotes .greenBg {
    color: #fff;
    width: 65px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    background: #7ed321;
    display: inline-block;
    border-radius: 5px;
  }

  .quotes .green {
    color: #7ed321;
  }

  .quotes .transactionTop {
    background: #fff;
    border-bottom: 1px solid #f6f6f6;
  }

  .quotes .transactionTop li {
    float: left;
    height: 40px;
    line-height: 40px;
    width: 33.33%;
    text-align: center;
    list-style: none;
  }

  .quotes .transactionTop li:first-child {
    text-align: left;
  }

  .quotes .transactionTop li:nth-child(3n) {
    text-align: right;
  }

  .quotes .transactionsecond {
    background: #fff;
    text-align: center;
    margin-bottom: 55px;
  }

  .quotes .transactionsecond li {
    color: #333;
    float: left;
    height: 50px;
    border-bottom: 1px solid #f6f6f6;
    list-style: none;
    width: 33.33%;
  }

  .quotes .transactionsecond li:first-child {
    text-align: left;
  }

  .quotes .transactionsecond li:nth-child(3n) {
    text-align: right;
  }

  .quotes .indexTitle {
    height: 45px;
    line-height: 45px;
    background: #fff;
    padding-left: 15px;
    color: #333;
    border-bottom: 1px solid #f6f6f6;
  }

  .quotes .indexCont {
    float: left;
    height: 80px;
    width: 33.33%;
    text-align: center;
    list-style: none;
    background: #fff;
    padding-top: 5px;
  }

  .quotes .f10 {
    color: #ff1010;
  }

  .quotes .c3 {
    color: #333;
  }

  .quotes .exchange {
    height: 45px;
    line-height: 45px;
    background: #fff;
    padding-left: 15px;
    color: #333;
    border-bottom: 1px solid #f6f6f6;
  }

  .justCapital {
    font-size: 12px;
    width: 70px;
    text-align: center;
    background: #ff1010;
    color: #fff;
    height: 25px;
    line-height: 25px;
    margin: auto;
    border-radius: 5px;
  }

  .negativeCapital {
    font-size: 12px;
    width: 70px;
    text-align: center;
    background: #7ed321;
    color: #fff;
    height: 25px;
    line-height: 25px;
    margin: auto;
    border-radius: 5px;
  }
</style>